<template>
    <div class="mt-2">
        <template v-if="targetData.filter">
            <a-card class="mb-2">
                <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{</p>
                    {{ targetData.filter }}
                <p>}</p>
                <a-space>
                    <a-button type="primary" ghost @click="editFilter">编辑</a-button>
                    <a-button type="primary"danger  @click="deleteFilter">删除</a-button>
                </a-space>
            </a-card>
        </template>
        <a-button class="w-full" @click="addFilter" v-else>
            新增过滤器
        </a-button>
        <a-modal 
            v-model:open="state.showModal" 
            title="过滤器配置"
            width="860px"
        >
            <div class="editor-modal-content flex">
                <!-- 左侧：代码编辑区 -->
                <div class="editor-left flex-1 pr-4">
                    <a-tag color="blue" class="mb-2" :bordered="false">
                        自定义函数：<span class="func-keyword">function</span>&nbsp;&nbsp;filter(data, res)&nbsp;&nbsp;{
                    </a-tag>
                    <editor ref="editorRef" editor-type="js" height="450px" :source="state.filter" @update="v=>updateVal(v)"/>
                    <a-tag color="blue" class="mt-2" :bordered="false">
                        }
                    </a-tag>
                </div>
                <!-- 分割线 -->
                <a-divider type="vertical" class="custom-divider"/>
                <!-- 右侧：内容区 -->
                <div class="editor-right flex-1 pl-4">
                    <div class="editor-title mb-2">说明与示例</div>
                    <div class="editor-desc">
                        <p>你可以在左侧编写 JS 过滤函数，函数需返回处理后的数据。</p>
                        <p>示例：</p>
                        <pre class="example-code whitespace-normal">return data.filter(item => item.status === 'active')</pre>
                        <pre class="example-code  whitespace-normal" v-if="filterRes">
                            {{ filterRes }}
                        </pre>
                    </div>
                </div>
            </div>
            <template #footer>
                <a-space>
                    <a-button type="primary" ghost @click="save">保存</a-button>
                    <a-button @click="cancel">取消</a-button>
                </a-space>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { computed, inject, reactive, useTemplateRef, watch, type Ref } from 'vue';
import { useTargetData } from '../../../../hooks/useTargetData';
import editor from '@/components/editor/index.vue'
import { cloneDeep, toString } from 'lodash';
import type { ResType } from '@/api/types';

const editorRef = useTemplateRef("editorRef")
const {targetData} = useTargetData()

const result = inject<Ref<any>>('result')

const state = reactive({
    showModal:false,
    filter:targetData.value.filter || `return data`,
    errorFlag:false
})

const cancel = ()=>{
    state.showModal = false
}

const addFilter = ()=>{
    state.showModal = true
}
const updateVal = (v:any)=>{
    state.filter = v
}
const filterRes = computed(()=>{
    try {
        const response:ResType<any> = cloneDeep(result?.value) as any
        const fn = new Function('data','res',state.filter)
        const res = fn(response.data,response)
        state.errorFlag = false
        return res
    } catch (error) {
        state.errorFlag = true
        return `过滤函数错误，日志：${error}`
    }
})

const save = ()=>{
    if(state.errorFlag){
        cancel()
        return
    }
    targetData.value.filter = state.filter
    cancel()
}

const deleteFilter = ()=>{
    targetData.value.filter = ""
}

const editFilter = ()=>{
    addFilter()
}
</script>

<style lang='scss' scoped>
.editor-modal-content {
    height: 450px;
    align-items: stretch; // 让子项高度一致
}
.editor-left, .editor-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.editor-right{
    overflow: hidden;
    overflow-y: auto;

}
.editor-title {
    font-size: 12px;
    margin-bottom: 8px;
}
.editor-textarea {
    font-family: 'Fira Mono', 'Consolas', monospace;
    resize: vertical;
}
.editor-desc {
    font-size: 13px;
    color: #666;
    background: #fafafa;
    border-radius: 6px;
    padding: 12px;
}
.example-code {
    background: #f5f5f5;
    padding: 8px;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 4px;
    font-family: 'Fira Mono', 'Consolas', monospace;
}
.custom-divider {
    height: auto !important;
    min-height: 180px;
    align-self: stretch;
    margin: 0 12px;
    display: flex;
    align-items: center;
    // 兼容 antd-vue divider 样式
    .ant-divider-vertical {
        height: 100%;
        min-height: 180px;
        margin: 0;
    }
}
.func-keyword {
  color: #b478cf;
}
</style>